
import { ComponentPublicInstance, Component } from 'vue'
import { MakeLayerMountComponent, updateElementStyle } from './MountComponent'

import Test from '@/components/test.vue'

// 指定可选的类型
type optional = "component" | "fn" | "children";

/**
 * @param Required 将类型的每一项变为必选项
 * @param Partial 将类型的每一项变为可选项
 * @param Pick<T,V1|V2> 将指定的类型捡去来并返回
 * @param Omit<T,V1|V2> 将指定的类型扔掉并返回
 * @param Exclude 忽略掉指定的类型
 * 
 */
type MenuCurrencyType = Required<Pick<MenuContent, Exclude<keyof MenuContent, optional>>>[] & Partial<Pick<MenuContent, optional>>[]
// 菜单的类型
type MenuContent = {
    id: string | number,
    label: string | number,
    component: Component,
    fn: Function,
    children: MenuCurrencyType
}

type MenuDataType = {
    [key: string]: MenuCurrencyType
}

const menuData: MenuDataType = {
    "测试菜单": [
        {
            id: 0,
            label: "测试1",
            component: Test
        }, {
            id: 1,
            label: "测试2",
            children: [
                {
                    id: 1 - 1,
                    label: "测试2-1",
                    children: [
                        {
                            id: 1 - 1 - 1,
                            label: "测试2-1-1",
                            fn: () => {
                                const onLoad = () => {
                                    console.log("您好啊");
                                }
                                return { onLoad }
                            }
                        }
                    ]
                }
            ]
        },
        {
            id: 2,
            label: "测试3",
            children: [
                {
                    id: 1 - 1 - 2,
                    label: "测试2-1-2",
                }
            ]
        }
    ]
}

// 创建一个保存挂件实例的对象
export let InstanceWeakMap = new WeakMap();

type RightMenuParamsType = {
    component: Component
}

export interface useLoadRightMenuResult {
    LoadingRightMenu: Function,
    unLoadingRightMenu: Function,
}
// 添加右击菜单
export const useLoadRightMenu = (MenuParams: RightMenuParamsType): useLoadRightMenuResult => {

    let { component } = MenuParams;

    let _div: HTMLElement | null = null;

    let _instance: ComponentPublicInstance = null

    // 加载右击菜单
    const LoadingRightMenu = (layerParams: any) => {

        let { name, pageX, pageY, MenuData, params } = layerParams;
        let data = MenuData || menuData[name];

        let { div, instance } = (_div && _instance) ? { div: _div, instance: _instance }
            : MakeLayerMountComponent(component, {
                params: params,
                RightMenuData: [...data],
                onclose: () => {
                    _instance?.unmount()
                    _div?.remove()
                    _div = null;
                }
            })

        // 修改元素位置
        updateElementStyle(div, {
            left: pageX,
            top: pageY
        })

        _div = div;
        _instance = instance;
        return {
            div,
            instance
        }
    }
    // 卸载右击菜单
    const unLoadingRightMenu = () => {
        _instance?.unmount()
        _div?.remove()
        _div = null;
        _instance = null;
    }
    return {
        LoadingRightMenu,
        unLoadingRightMenu
    }

}